<template>
	<view class="contents">
		<u-modal :show="modalshow" @confirm="modalshow=false" :title="title">
			<view class="slot-content">
				<u--textarea v-model="tereaval" placeholder="请输入内容" ></u--textarea>
				<u---form labelPosition="left" labelWidth='80'>
					<u-form-item @click="selectdate" label="陪伴日期" prop="userInfo.name" borderBottom ref="item1">
						<u--input v-model="radiovalue1" disabled disabledColor="#ffffff" placeholder="请选择萌宠到家日期"
							border="none"></u--input>
						<template #right>
							<u-icon name="arrow-right"></u-icon>
						</template>
					</u-form-item>
				</u---form>
			</view>
			
		</u-modal>
		<swiper class="swiper" circular>
			<swiper-item>
				<view class="swiper-item">
					<view class="iconadd">
						<view></view>
						<u-icon name="plus" color="#2979ff" size="22" @click="tomypet"></u-icon>
					</view>
					<view class="item_content">
						<view class="headerimg"
							@click="lookImg('https://tenfei03.cfp.cn/creative/vcg/800/new/VCG211454662865.jpg')">
							<up-image class="iconimg" width="120rpx" height="120rpx" mode="scaleToFill"
								src="https://tenfei03.cfp.cn/creative/vcg/800/new/VCG211454662865.jpg"></up-image>
						</view>
						<view class="">
							<view class="">Bob</view>
							<view class="">1岁</view>
							<view class="">
								已绝育
							</view>
						</view>
						<view class="">
							3天后是Bob的生日哦
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-green">B</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-blue">C</view>
			</swiper-item>
		</swiper>
		<view class="timetree">
			<view class="tree">
				<view class="left centep">
					请输入文字
				</view>
				<view class="centes centep"></view>
				<view class="right centep">
					<u-icon name="plus" color="#2979ff" size="22" @click="tomypet"></u-icon>
				</view>
			</view>
			<view class="tree" v-for="item in 2" :key="item">
				<view class="left">
					2023.2.1
				</view>
				<view class="cente"></view>
				<view class="right" @click="popMoadl">
					Bob来到新家6个月啦，需要疥虫疫苗了哦
				</view>
			</view>
		</view>
		<u-datetime-picker @confirm="selectdateVal" @cancel="showDate=false" :minDate="946684800000"
			:maxDate="new Date().getTime()" :show="showDate" v-model="radiovalue1" mode="date"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		name: '宠物基本信息',
		data() {
			return {
				showDate:false,
				autoplay: false,
				modalshow:false,
				radiovalue1:'',
				tereaval:''
			}
		},
		methods: {
			tomypet() {
				uni.navigateTo({
					url: '/petselfinfo/mypet'
				})
			},
			lookImg(url) {
				uni.previewImage({
					urls: [url]
				})
			},
			popMoadl() {
				this.tereaval='Bob来到新家6个月啦，需要疥虫疫苗了哦'
				this.modalshow=true
			},
			selectdateVal() {
				
			},
			selectdate(){
				this.showDate=true
			}


		}
	}
</script>
<style lang="scss" scoped>
	.headerimg {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		overflow: hidden;

		.iconimg {
			width: 120rpx;
			height: 120rpx;
			border-radius: 60rpx;
		}
	}

	.swiper {
		border-radius: 24rpx;
	}

	.swiper-item {
		height: 300rpx;
		border-radius: 24rpx;
		overflow: hidden;
	}

	.contents {
		padding: 24rpx;
	}

	.iconadd {
		display: flex;
		justify-content: space-between;
	}

	.uni-bg-red {
		background: red;
	}

	.uni-bg-green {
		background: green;
	}

	.uni-bg-blue {
		background: blue;
	}

	.item_content {
		display: grid;
		grid-template-columns: 120rpx auto auto;
		grid-gap: 0px 24rpx;
	}

	.tree {
		display: grid;
		grid-template-columns: 35% 4rpx auto;

		.left {
			text-align: right;
			padding-right: 36rpx;
			padding-bottom: 24rpx;
		}

		.cente,
		.centes {
			background: #0089ff;
			position: relative;
			padding-bottom: 24rpx;
		}

		.centep {
			padding-top: 40rpx;
		}

		.centes::after {
			display: block;
			position: absolute;
			content: '';
			width: 0;
			height: 0;
			top: -20rpx;
			left: -22rpx;
			border-left: 24rpx solid transparent;
			border-right: 24rpx solid transparent;
			border-bottom: 30rpx solid #0089ff;
		}

		.cente::after {
			display: block;
			position: absolute;
			left: -13.5rpx;
			top: 10rpx;
			content: '';
			width: 31rpx;
			height: 31rpx;
			border-radius: 50%;
			background: #0089ff;
		}

		.right {
			padding-left: 36rpx;
			padding-bottom: 24rpx;
		}
	}
	.slot-content{
		width: 100%;
	}
</style>